<template>
<div class="layout_container">
	<!-- 左侧菜单 -->
	<div class="layout_slider">
		<!-- Logo区域 -->
		<Logo></Logo>
		<!-- 左侧菜单 -->
		<!-- 使用 elementPlus 的 scrollbar组件 -->
		<Menu :menuList="menuRoutes"></Menu>
		
		 <!-- <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p> -->
		</div>

	<!-- 顶部导航 -->
	<div class="layout_tabbar">tabbar</div>
	<!-- 内容展示区 -->
	<div class="layout_main">
			
	</div>
	<h1></h1>
	</div>

</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/userStore';
import Logo from './logo/index.vue'
import Menu from './menu/index.vue'
import { ITEM_RENDER_EVT } from 'element-plus/lib/components/virtual-list/src/defaults.js';
// 获取用户相关的小仓库的数据
// 根据 meta属性中hidden的值 过滤可以显示在菜单栏的路由
let menuRoutes = useUserStore().menuRoutes.filter((item) => !item.meta.hidden)







</script> 
<style scoped lang="scss">

.layout_container{
	width: 100%;

	height: $layout-container-height;
	background: pink;
	// position: relative;

	// 左侧菜单
	.layout_slider{
		width: $slider-menu-width;
		height: $layout-container-height;
		background-color:$slider-menu-background;

		.scrollbar{
			width: 100%;
			height: calc(100vh - $slider-logo-height);

			.scrollbar-demo-item {
			display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      margin: 10px;
      text-align: center;
      border-radius: 4px;
      background: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
}

		}

		
	}

	// 顶部导航
	.layout_tabbar{
		width: $layout-tabbar-width;
		height: $layout-tabbar-height;
		position: fixed;
		top: 0px;
		left: $slider-menu-width;
		background-color: yellowgreen
	}
	// 右侧主要内容区域
	.layout_main{
		width:$layout-tabbar-width ;
		height: calc($layout-container-height - $layout-tabbar-height);
		padding: 20px;
		position: absolute;
		top:$layout-tabbar-height;
		left:$slider-menu-width;
		background-color: #ccc;
		box-sizing: border-box;
		p{
			height: 1000px;
			background-color: red;
		}


	}
}
</style>